<!-- 分类首页 -->
<template>
  <div class="kind_main">
    <el-row :gutter="30">
      <el-col :span="12">
        <el-button type="primary" @click="doSave">新增分类</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <el-col :span="6" v-for="item in kindList" :key="item.id">
        <el-card shadow="hover">
          <div slot="header">
            <span>{{item.ctitle}}</span>
          </div>
          <el-image style="width: 180px; height: 180px" :src="item.img"></el-image>
        </el-card>
      </el-col>
    </el-row>
    <!-- 整个弹窗修改用 -->
    <el-dialog title="分类详情" :visible.sync="dialog">
      <el-row>
        <el-col :span="12"><span>不提供分类修改</span></el-col>
        <el-col :span="3" :offset='6' > <el-button  type="primary" @click="dialog = false">确定</el-button></el-col>
      </el-row>
      
      
     
      
    </el-dialog>
  </div>
</template>

<script>
import productApi from "@/api/product/kind";
export default {
  name: "kind",
  data() {
    return {
      kindList: [],
      tempList:[],
      dialog:false,
    };
  },
  computed: {},
  created() {
    this.getKindsList();
  },
  mounted() {},
  methods: {
    // 获取分类列表
    getKindsList() {
      productApi.list().then((res) => {
        this.kindList = res.data;
      });
    },
    //新增列表
    doSave() {
      this.dialog = true;
      // productApi.saveOrUpdate({});
    },
  },
};
</script>

<style lang='scss' scoped >
.kind_main {
  margin: 30px;
}
</style>
